{# ┌───┐   ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┬───┐ ┌───┬───┬───┐                   #}
{# │Esc│   │ F1│ F2│ F3│ F4│ │ F5│ F6│ F7│ F8│ │ F9│F10│F11│F12│ │P/S│S L│P/B│  ┌┐    ┌┐    ┌┐   #}
{# └───┘   └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┴───┘ └───┴───┴───┘  └┘    └┘    └┘   #}
{# ┌───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───┬───────┐ ┌───┬───┬───┐ ┌───┬───┬───┬───┐ #}
{# │~ `│! 1│@ 2│# 3│$ 4│% 5│^ 6│& 7│* 8│( 9│) 0│_ -│+ =│ BacSp │ │Ins│Hom│PUp│ │N L│ / │ * │ - │ #}
{# ├───┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─────┤ ├───┼───┼───┤ ├───┼───┼───┼───┤ #}
{# │ Tab │ Q │ W │ E │ R │ T │ Y │ U │ I │ O │ P │{ [│} ]│ | \ │ │Del│End│PDn│ │ 7 │ 8 │ 9 │   │ #}
{# ├─────┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴┬──┴─────┤ └───┴───┴───┘ ├───┼───┼───┤ + │ #}
{# │ Caps │ A │ S │ D │ F │ G │ H │ J │ K │ L │: ;│" '│ Enter  │               │ 4 │ 5 │ 6 │   │ #}
{# ├──────┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴─┬─┴────────┤     ┌───┐     ├───┼───┼───┼───┤ #}
{# │ Shift  │ Z │ X │ C │ V │ B │ N │ M │< ,│> .│? /│  Shift   │     │ ↑ │     │ 1 │ 2 │ 3 │   │ #}
{# ├─────┬──┴─┬─┴──┬┴───┴───┴───┴───┴───┴──┬┴───┼───┴┬────┬────┤ ┌───┼───┼───┐ ├───┴───┼───┤ E││ #}
{# │ Ctrl│    │Alt │         Space         │ Alt│    │    │Ctrl│ │ ← │ ↓ │ → │ │   0   │ . │←─┘│ #}
{# └─────┴────┴────┴───────────────────────┴────┴────┴────┴────┘ └───┴───┴───┘ └───────┴───┴───┘ #}

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="/Site/static/logo/32x32.png">

    <title>PassNote - Sign Up</title>

    <!-- Bootstrap core CSS -->
    <link href="/Site/static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="/Site/static/css/floating-labels.css" rel="stylesheet">

    <script src="/Site/static/js/jquery-3.3.1.js"></script>
    <script src="/Site/static/js/jquery.md5.js"></script>
</head>

<body>
<nav class="navbar navbar-expand-sm navbar-light bg-light fixed-top">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01"
            aria-controls="navbarTogglerDemo01"
            aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
        <a class="navbar-brand" href="/"><img width="100" height="100" src="/Site/static/image/PassNoteLogo.png"></a>
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active">
                <a class="nav-link" href="/site">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
        </ul>
    </div>
</nav>

<form class="form-signin" method="post">
    {% csrf_token %}

    <div class="text-center mb-4">
        <h1 class="h3 mb-3 font-weight-normal">Creating account</h1>
        <p>Please enter your email address and setup a password to create a new <a href="/">PassNote</a> account.</p>
    </div>

    {% if message %}
        <div class="alert alert-{{ message.type }} form-control" role="alert">
            {{ message.content }}
        </div>
    {% endif %}

    <div class="form-label-group">
        <input type="text" id="inputUsername" class="form-control" placeholder="User name" name="name" required
               autofocus>
        <label for="inputUsername">User name</label>
    </div>

    <div class="form-label-group">
        <input type="text" id="inputNickname" class="form-control" placeholder="Nick name" name="nickname" required>
        <label for="inputNickname">Nick name</label>
    </div>

    <div class="form-label-group">
        <input type="email" id="inputMail" class="form-control" placeholder="Email address" name="mail" required>
        <label for="inputMail">Email address</label>
    </div>

    <div class="form-label-group">
        <input type="hidden" id="encrypted-password" name="password">
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <label for="inputPassword">Password</label>
    </div>

    <button id="btn-signup" class="btn btn-lg btn-primary btn-block" type="submit">Sign Up</button>
    <p class="mt-5 mb-3 text-muted text-center">Copyright &copy; DealiAxy 2018</p>

    <script>
        $("#btn-signup").click(function () {
            let raw = $("#inputPassword").val();
            let encrypted = $.md5(raw);
            $("#encrypted-password").attr("value", encrypted);
        })
    </script>
</form>
</body>
</html>
